@import "../../styles/base";

@function tovw($size) {
  @return #{$size / 3.6}vw;
}

body {
  background: #ccc;
}

.SignUp {
  padding: tovw(15) tovw(12) tovw(35);
  background: #F2F4F6;
  position: relative;

  .title {
    font-size: tovw(16);
    color: #000000;
    letter-spacing: 0;
    font-weight: 700;
    padding: tovw(8) !important;

    .toggle-btn {
      position: absolute;
      right: 2vw;
      top: 50%;
      transform: translateY(-50%);

      .text {
        font-size: tovw(12);
        color: #6A707C;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        margin-right: tovw(4);
      }

      /* toggle in label designing */
      .toggle {
        position : relative ;
        display : inline-block;
        width : tovw(30);
        height : tovw(10);
        background-color: #D3CEDA;
        border-radius: tovw(10);
      }

      /* After slide changes */
      .toggle:after {
        content: '';
        position: absolute;
        width: tovw(16);
        height: tovw(16);
        border-radius: 50%;
        background-color: #C4A1FF;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        transition:  all 0.5s;
      }

      /* Checkbox checked effect */
      .checkbox:checked + .toggle::after {
        background-color: #FF7EF1;
        left: tovw(15);
      }

      /* Checkbox checked toggle label bg color */
      .checkbox:checked + .toggle {
        background-color: #9456FD;
      }

      /* Checkbox vanished */
      .checkbox {
        display : none;
      }
    }
  }

  .GiftBox {
    margin-bottom: tovw(10);
    position: relative;
    padding-bottom: tovw(20);

    .sign-msg {
      position: absolute;
      bottom: tovw(14);
      left: 50%;
      transform: translateX(-50%);
      font-size: tovw(12);
      color: #999B9E;
      letter-spacing: 0;
      text-align: center;
      line-height: tovw(17);
      font-weight: 400;
      z-index: 1;

      .day {
        font-size: tovw(14);
        color: #9456FD;
        letter-spacing: 0;
        text-align: center;
        line-height: tovw(17);
        font-weight: 500;
      }
    }
  }

  .result-modal {
    .modal-body {
      background-color: transparent !important;
      height: 100vh !important;
      width: 100vw !important;
    }
  }
}

